<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<u-icon name="arrow-left" color="#020121" size="34"></u-icon>
			</view>
			<view class="r-name">案例详情</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="user dispaly-center">
			<view class="avatar f-1">
				<image
					src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
					mode="aspectFill"></image>
			</view>
			<view class="desc f-3">
				<view class="desc-top dispaly-center">
					<view class="name">刘子</view>
					<view class="lv">高级服装师</view>
				</view>
				<view class="order-left dispaly-center">
					<view class="o-title">服务订单</view>
					<view class="num">216单</view>
				</view>
			</view>
			<view class="go f-1 dispaly-align-center" @click="$goUrl('/subPackage/index/submitCustomized')">去定制</view>
		</view>
		<view class="content p-32">
			<view class="swiper">
				<uni-swiper-dot selectedBackgroundColor="#020121" :info="swiperData" :current="current" mode="round">
					<swiper :current="current" @change="changeSwiper" class="swiper" circular :autoplay="true"
						:interval="2000" :duration="500">
						<swiper-item v-for="item in swiperData" :key="item" class="">
							<view class="dispaly-align-center">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="bottom">
				<view class="title">
					堪比奢侈品的植鞣工艺，把时光堪比奢侈品 的植鞣工艺，把时光
				</view>
				<view class="content">
					堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工堪比奢侈品的植鞣工艺，把时光揉进皮衣，堪比奢侈品的植鞣工
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'

	// 轮播图切换
	const current = ref(0)
	const changeSwiper = (data) => current.value = data.detail.current
	const swiperData = ref([
		'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww'
	])
	// 获取元素高度
	const navHeiht = ref(0)
	onMounted(async () => {
		for (var i = 0; i < 4; i++) {
			swiperData.value.push(
				'https://images.unsplash.com/photo-1529374255404-311a2a4f1fd9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGN1c3RvbSUyMG1hZGUlMjBhcHBhcmVsfGVufDB8fDB8fHww'
			)
		}
		const res = await getElementHeight('.f')
		navHeiht.value = res
	})
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	:deep(.uni-swiper__dots-box) {
		position: static !important;
		margin-top: 96rpx;
	}

	.r-name {
		color: #020121;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {
		.swiper {
			height: 1000rpx;

			image {
				width: 600rpx;
				height: 1000rpx;
				border-radius: 20rpx;
			}
		}

		.bottom {
			background-color: #fff;

			.title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36rpx;
				color: #020121;
				line-height: 52rpx;
				margin: 132rpx 0 24rpx 0;
			}

			.content {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7B7B89;
				line-height: 40rpx;
			}
		}
	}

	.user {
		background-color: #fff;
		padding: 32rpx;

		.avatar {
			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}

		.desc {
			.desc-top {
				.name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 32rpx;
					color: #020121;
					margin-right: 10rpx;
				}

				.lv {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 6rpx 10rpx;
					background: #020121;
					border-radius: 8rpx;
				}
			}

			.order-left {
				margin: 10rpx 0;

				.o-title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #7B7B89;
					margin-right: 24rpx;
				}

				.num {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 28rpx;
					color: #020121;
				}
			}
		}

		.go {
			width: 132rpx;
			height: 56rpx;
			border-radius: 28rpx;
			border: 2rpx solid #020121;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 24rpx;
			color: #020121;
		}
	}
</style>

<style>
	page {
		background-color: #fff;
	}
</style>